<template>
  <div>
    <SearchTable
      v-bind="$attrs"
      :searchSchame="searchSchame"
      :tableColumns="tableColumns"
      :api="queryMyPendingAuditData"
      :defaultQuery="defaultQuery"
      ref="tableRef"
    ></SearchTable>
    <ReceiveMatterDialog ref="receiveMatterDialog" />
    <HandleEvents ref="handleEvents" @update="updateList" />
  </div>
</template>

<script lang="ts" setup>
import { computed, useTemplateRef } from 'vue'
import SearchTable from '@/components/table/SearchTable.vue'
import { generateTableColumn, searchSchame } from './util'
import { queryMyPendingAuditData } from '@/api/home'
import ReceiveMatterDialog from '@/views/mission/receiveMatter/ReceiveMatterDialog.vue'
import { useRouteQuery } from '@vueuse/router'
import HandleEvents from '@/components/events/HandleEvents.vue'
import { EDetailType } from '@/views/application/typings'
import { EMatterTodoStatus } from '@/components/statusShow/util'

const handleEvents = useTemplateRef<typeof HandleEvents>('handleEvents')

const tableRef = useTemplateRef<InstanceType<typeof SearchTable>>('tableRef')
const status = useRouteQuery('status', EMatterTodoStatus['待办理'], {
  transform: Number,
})

const defaultQuery = computed(() => {
  return {
    status: status?.value ? status.value : EMatterTodoStatus['待办理'],
  }
})

const receiveMatterDialog = useTemplateRef<
  InstanceType<typeof ReceiveMatterDialog>
>('receiveMatterDialog')

const tableColumns = generateTableColumn(tableColumnClick)

// 列表项点击
function tableColumnClick(columnType: string, row: Record<string, any>) {
  if (columnType === 'title') {
    const isApprove =
      row.status === EMatterTodoStatus['待办理']
        ? EDetailType.APPROVE
        : EDetailType.VIEW
    handleEvents?.value?.show(row.type, row, isApprove)
  }
}

// 更新列表
function updateList() {
  tableRef.value?.getInfo()
}
</script>
